<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
	<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
	<script type="text/javascript"src="http://jquery-jsonp.googlecode.com/files/jquery.jsonp-1.1.0.min.js"></script>
	<script type="text/javascript"src="http://shrimp7.googlecode.com/files/english.js"></script>
	<script type="text/javascript"src="http://shrimp7.googlecode.com/files/settings_english.js"></script>
	<script type="text/javascript"src="http://shrimp7.googlecode.com/files/chinese.js"></script>
	<script type="text/javascript"src="http://shrimp7.googlecode.com/files/settings_chinese.js"></script>
	<script type="text/javascript"src="../lib/shrimp7.js"></script>
	<link rel="stylesheet"type="text/css"href="../css/webstyle.css"/>
	<link rel="stylesheet"type="text/css"href="../css/flyoutstyle.css"/>
	<link rel="stylesheet"type="text/css"href="../css/ui/jquery-ui-1.7.2.custom.css"/>
	<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
	<meta http-equiv="Pragma"content="no-cache"/>
	<title>shrimp7 web demo - settings</title>
	
	<script>
		function demo1(){
			shrimp7.toggleScreen({
				id:		'settings',
				type:	'dialog',
				title:	'Demo 1 screen',
				dropIn:	'#mydropinscreenelement',
				init:	function(){
					shrimp7.settings.starter();
				}
			});
		}
	</script>
	
</head>
<body>

<h1>shrimp7.toggleScreen(object)</h1>

<p>This demo shows the settings functionality.</p>

<input type="button" onclick="demo1()" value="demo 1 open settings in dialog"/> 

<div id="mydropinscreenelement"></div>

<div id="shrimp7screenContent" style="display:none;">

		<div id="settings"style="display:none;">
			<div style="margin-top:10px;width:100%;">
				<div id="page_start"style="display:none;">
					<div style="height:75px;"><p class="lngSettingsIntroduction">Welcome at the shrimp7 setup. Select a language and click next..</p></div>
					<fieldset class="page">
						<legend style="font-weight:bold;"><img src="images/icons/shrimp7_icon_16x16.png"alt=""style="vertical-align:middle;"/> shrimp7</legend>
						<div style="margin-top:10px;">
						<div style="width:50%;float:left;" class="lngSettingsLanguage">Language</div><div style="width:49%;float:left;"><select id="settingsLanguageSelector"onchange="shrimp7.settings.changeLanguage();"><option value="english">English</option><option value="chinese">中文</option></select> <img src="images/icons/earth.gif"alt=""style="width:16px;"/></div>
						</div>
					</fieldset>
				</div>
				<div id="page_selectServices"style="display:none;">
					<div style="height:75px;">
						<p class="lngSettingsSelectServices">Please select the services you want to use:</p>
						<div id="error_selectServices"style="display:none;color:#ff0000;"></div>
					</div>
					<fieldset class="page">
						<legend style="font-weight:bold;"><img src="images/icons/shrimp7_icon_16x16.png"alt=""style="vertical-align:middle;"/> shrimp7</legend>
						<div style="margin-top:10px;">
							<div style="width:40%;float:left;"><img src="images/icons/facebook.png"alt=""style="vertical-align:middle;width:16px;"/> Facebook</div><div style="width:59%;float:left;"><input id="boolFacebook"type="checkbox"/> <a class="lngSettingsNoFacebookMember"href="http://www.facebook.com/signup"style="font-size:10px;">No Facebook member?</a></div>
							<div style="width:40%;float:left;"><img src="images/icons/twitter.png"alt=""style="vertical-align:middle;width:16px;"/> Twitter</div><div style="width:59%;float:left;"><input id="boolTwitter"type="checkbox"/> <a class="lngSettingsNoTwitterMember"href="https://twitter.com/signup"style="font-size:10px;">No Twitter member?</a></div>
						</div>
					</fieldset>
				</div>
				<div id="page_facebookCode"style="display:none;">
					<div style="height:75px;">
						<p class="lngSettingsFacebookOneTimeCodeIntro">For using Facebook you need a 'one-time-code', <a href="http://www.facebook.com/code_gen.php?v=1.0&amp;api_key=460e6842edb265d791b35f4a3c5a0b4d">click here</a> to get the free code. When you have the code, go back to the shrimp7 setup and fill in the code.</p>
						<div id="error_facebookCode"style="display:none;color:#ff0000;"></div>
					</div>
					<fieldset class="page">
						<legend style="font-weight:bold;"><img src="images/icons/facebook.png"alt=""style="vertical-align:middle;width:16px;"/> Facebook</legend>
						<div style="margin-top:10px;">
							<div style="width:50%;float:left;" class="lngSettingsOneTimeCode">One-time code</div><div style="width:49%;float:left;"><input type="text"id="txtToken"name="code"value=""size="6"maxlength="6"/><br>(<a class="lngSettingsFacebookGetTheCode"href="http://www.facebook.com/code_gen.php?v=1.0&amp;api_key=460e6842edb265d791b35f4a3c5a0b4d"target="_blank">Get the code</a>)</div>
						</div>
					</fieldset>
				</div>
				<div id="page_facebookCheckCode"style="display:none;">
					<div style="height:75px;"><p class="lngSettingsFacebookVerifyingCodeIntro">Verifying your Facebook one-time code, this could take a while..</span></p></div>
					<fieldset class="page">
						<legend style="font-weight:bold;"><img src="images/icons/facebook.png"alt=""style="vertical-align:middle;width:16px;"/> Facebook</legend>
						<div style="margin-top:10px;">
								<div style="width:40%;float:left;" class="lngSettingsOAuthPincode">Verifying code:</div><div id="verifyingFacebookPIN"style="width:49%;float:left;"></div>
						</div>
					</fieldset>
				</div>
				<div id="page_facebookSound"style="display:none;">
					<div style="height:75px;"><p class="lngSettingsFacebookEnableSoundIntro">Do you want to enable sound when there are new Facebook items?</p></div>
					<fieldset class="page">
						<legend style="font-weight:bold;"><img src="images/icons/facebook.png"alt=""style="vertical-align:middle;width:16px;"/> Facebook</legend>
						<div style="margin-top:10px;">
							<div style="width:50%;float:left;" class="lngSettingsEnableSound">Enable sound:</div><div style="width:49%;float:left;"><input id="boolFacebookSound"type="checkbox" /></div>
						</div>
					</fieldset>
				</div>
				<div id="page_twitterCode"style="display:none;">
					<div style="height:75px;">
						<p class="lngSettingsTwitterOneTimeCodeIntro">You need a Twitter one-time code to make contact with the Twitter services.</p>
						<span class="twitterGetCodeLinkInText"></span>
						<div id="error_twitterCode"style="display:none;color:#ff0000;"></div>
					</div>
					<fieldset class="page">
						<legend style="font-weight:bold;"><img src="images/icons/twitter.png"alt=""style="vertical-align:middle;width:16px;"/> Twitter</legend>
						<div style="margin-top:10px;">
								<div style="width:40%;float:left;" class="lngSettingsOneTimeCode">OAuth pincode:</div><div style="width:49%;float:left;"><input id="twitterPIN"type="text"style="width:150px;"/><br/><span class="twitterGetCodeLink"></span></div>
						</div>
					</fieldset>
				</div>
				<div id="page_twitterCheckCode"style="display:none;">
					<div style="height:75px;"><p class="lngSettingsTwitterVerifyingCodeIntro">Verifying your Twitter one-time code, this could take a while..</span></p></div>
					<fieldset class="page">
						<legend style="font-weight:bold;"><img src="images/icons/twitter.png"alt=""style="vertical-align:middle;width:16px;"/> Twitter</legend>
						<div style="margin-top:10px;">
								<div style="width:40%;float:left;" class="lngSettingsOAuthPincode">Verifying code:</div><div style="width:49%;float:left;"><span id="verifyingTwitterPIN"><img src="images/icons/loading_dots.gif"alt=""/></span></div>
						</div>
					</fieldset>
				</div>
				<div id="page_twitterSound"style="display:none;">
					<div style="height:75px;"><p class="lngSettingsTwitterEnableSoundIntro">Do you want to enable sound when there are new Tweets?</p></div>
					<fieldset class="page">
						<legend style="font-weight:bold;"><img src="images/icons/twitter.png"alt=""style="vertical-align:middle;width:16px;"/> Twitter</legend>
						<div style="margin-top:10px;">
							<div style="width:50%;float:left;" class="lngSettingsEnableSound">Enable sound:</div><div style="width:49%;float:left;"><input id="boolTwitterSound"type="checkbox"/></div>
						</div>
					</fieldset>
				</div>
				<div id="page_twitterDeveloper"style="display:none;">
					<div style="height:75px;"><p class="lngSettingsTwitterAddDeveloperIntro">Do you want to add the shrimp7 developer to your following list and get updates about shrimp7?</p></div>
					<fieldset class="page">
						<legend style="font-weight:bold;"><img src="images/icons/twitter.png"alt=""style="vertical-align:middle;width:16px;"/> Twitter</legend>
						<div style="margin-top:10px;">
							<div style="width:50%;float:left;" class="lngSettingsTwitterFollowDeveloper">Follow developer:</div><div style="width:49%;float:left;"><input id="boolTwitterDeveloper"type="checkbox"/></div>
						</div>
					</fieldset>
				</div>
				<div id="page_twitterTest"style="display:none;">
					<div style="height:75px;"><p class="lngSettingsTwitterSendTestTweetIntro">Do you want to send a test tweet?</p></div>
					<fieldset class="page">
						<legend style="font-weight:bold;"><img src="images/icons/twitter.png"alt=""style="vertical-align:middle;width:16px;"/> Twitter</legend>
						<div style="margin-top:10px;">
							<div style="width:50%;float:left;" class="lngSettingsTwitterSendTestTweet">Send test tweet:</div><div style="width:49%;float:left;"><input id="boolTwitterTestTweet"type="checkbox"/></div>
						</div>
					</fieldset>
				</div>
				<div id="page_finish"style="display:none;">
					<div style="height:75px;"><p>The setup is ready, now shrimp7 tries to contact the selected services. You can always re-run the setup to change settings. Thank you for using shrimp7!</p></div>
					<fieldset class="page">
						<legend style="font-weight:bold;"><img src="images/icons/earth.gif"alt=""style="width:16px;vertical-align:middle;"/> Connecting with the world</legend>
						<div id="facebookConnect"style="display:none;margin-top:10px;">
							<div id="facebookConnecting"><img src="images/icons/facebook.png"alt=""style="vertical-align:middle;width:16px;"/> Trying to connect with Facebook<img src="images/icons/loading_dots.gif"alt=""/></div>
							<div id="facebookConnectingProblem"style="display:none;"><img src="images/icons/facebook.png"alt=""style="vertical-align:middle;width:16px;"/> Problem while connecting with Facebook! <a href="javascript:System.Gadget.document.parentWindow.changeFlyout('shrimp7help.htm');">Click here for help</a></div>
							<div id="facebookConnected"style="display:none;"><img src="images/icons/facebook.png"alt=""style="vertical-align:middle;width:16px;"/> Succesfully connected with Facebook, <a href="javascript:shrimp7.settings.close({openTab:'facebook'});">click here to view youFacebook!</a></div>
						</div>
						<div id="twitterConnect"style="display:none;margin-top:10px;">
							<div id="twitterConnecting"><img src="images/icons/twitter.png"alt=""style="vertical-align:middle;width:16px;"/> Trying to connect with Twitter<img src="images/icons/loading_dots.gif"alt=""/></div>
							<div id="twitterConnectingProblem"style="display:none;"><img src="images/icons/twitter.png"alt=""style="vertical-align:middle;width:16px;"/> Problem while connecting with Twitter!</div>
							<div id="twitterConnected"style="display:none;"><img src="images/icons/twitter.png"alt=""style="vertical-align:middle;width:16px;"/> Succesfully connected with Twitter, <a href="javascript:shrimp7.settings.close({openTab:'twitter'});">click here to view youTwitter!</a></div>
						</div>
						<div id="friendfeedConnect"style="display:none;margin-top:10px;">
							<div id="friendfeedConnecting"><img src="images/icons/friendfeed.png"alt=""style="vertical-align:middle;width:16px;"/> Trying to connect with Friendfeed<img src="images/icons/loading_dots.gif"alt=""/></div>
							<div id="friendfeedConnectingProblem"style="display:none;"><img src="images/icons/friendfeed.png"alt=""style="vertical-align:middle;width:16px;"/> Problem while connecting with Friendfeed!</div>
							<div id="friendfeedConnected"style="display:none;"><img src="images/icons/friendfeed.png"alt=""style="vertical-align:middle;width:16px;"/> Succesfully connected with Friendfeed, <a href="javascript:shrimp7.tabState('friendfeed');">click here to view youFriendfeed!</a></div>
						</div>
					</fieldset>
				</div>
				<div style="clear:both;"></div>
				<div id="settingsButtons">
					<input type="button"id="setupCancelButton"class="lngMainPrevious"onclick=""value="Back"/>
					<input type="button"id="setupNextButton"class="lngMainNext"onclick=""value="Next"/>
				</div>
			</div>
		</div>

</div>

</body>
</html>